<template>
  <div style="padding: 5%;">
    <div style="font-weight: 600;font-size: 26px;color: #545C64;margin-bottom: 2%;">单片机温湿度采集</div>
    <div style="font-weight: 400;font-size: 20px;color: #00557F;">温度显示 : {{temp}}</div>
    <div style="font-weight: 400;font-size: 20px;color: #00557F;">当前采集时间 : {{time}}</div>
    <!-- <div style="margin-top: 2%;">
      <button @click="openBeep" style="width: 80px;border-radius: 6px;font-size: 18px;">开</button>
      <button @click="closeBeep" style="width: 80px;border-radius: 6px;color: red;font-size: 18px;">关</button>
    </div> -->
    <div style="background: #f5f5f5;padding: 20px;margin-top: 2%;">
      <div style="color: #00557F;font-weight: 800;font-size: 24px;float: left;">温湿度采集原理图 : </div>
      <img  src="../../../assets/img/tempystemArc.png" width="60%"/>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'temperatureControl',
    data() {
      return {
        temp: '',
        time: ''
      }
    },
    methods: {

    },
    mounted() {
      //获取实时时间
      // setInterval(() => {
      //   var a = new Date();
      //   var b = a.toLocaleTimeString();
      //   var c = a.toLocaleDateString();
      //   this.time = c + b;
      // },1000);
      setInterval(() => {
        axios
        	.get('http://172.22.36.77:12000/api/temp/read')
        	.then(response => {
            if(response.data.温度 == null || response.data.温度 == '') {
              this.state = '更新中';
            }
            if(response.data.响应时间 == null || response.data.响应时间 == '') {
              this.time = '获取响应时间中';
            }else {
              this.state = response.data.温度;
              this.time = response.data.响应时间;
            }
        	})
        	.catch(function(error) { // 请求失败处理
        		console.log(error);
        	});
      },7000);
    }
  }
</script>

<style>
</style>
